<template>
	<view>
		<view class="top_box">
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/wx-icon.png" mode=""></image>
			<view class="title">支付成功</view>
			<view class="title">¥{{formData.payedAmount}}</view>
		</view>
		<view class="theme">
			订单信息
		</view>
		<view class="itemTops">
			<view class="leftImg">
				<image :src="formData.imageUrl" mode="aspectFit" class="imgaes"></image>
				<!-- <image src="" mode="aspectFit" class="imgaes"></image> -->
			</view>
			<view class="rigths">
				<view class="topTitle">
					{{formData.houseName}}
				</view>
				<view class="contes">
					<view class="leftTes">
						类型：
					</view>
					<view class="btons btons_1" :class="{'btons_3':formData.orderType == 1,'btons_2':formData.orderType == 2}">
						{{formData.orderTypeName}}
					</view>
				</view>
				<view class="beix">
					备注：{{formData.remark}}
				</view>
				<view class="moches">
					<view class="lets">
						金额：
					</view>
					<view class="rigthsc">
						¥{{formData.orderAmount}}元
					</view>
				</view>
				<!-- <view class="btn_box">
					<view class="btn">
						订单列表
					</view>
				</view> -->


			</view>
		</view>
		<view class="buttom_box">
			<view class="back" @click="handleClick">
				返回订单列表
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		orderDetail
	} from './js/api.js'
	const formData = ref({
		payedAmount:0,
	})
	const getDetailData = async (id) => {
		let res = await orderDetail(id)
		console.log(res.data.code)
		console.log(res.data.data)
		if(res.data.code == 0){
			let data = res.data.data
			formData.value = data
		}
	}
	const handleClick = () => {
		uni.redirectTo({
			url: '/pagesA/myOrders/myOrders'
		})
	}
	onLoad((options) => {
		if (options.id) {
			getDetailData(options.id)
		}
	})
</script>

<style lang="less" scoped>
	.top_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 300rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.title {
			// font-size: 30rpx;
			margin-top: 30rpx;
		}
	}

	.theme {
		padding-left: 30rpx;
	}

	.itemTops {
		width: 690rpx;
		height: 236rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin: auto;
		display: flex;
		align-items: center;

		.leftImg {
			width: 230rpx;
			height: 204rpx;
			display: flex;
			align-items: center;
			overflow: auto;
			background: #e3e4e5;
			.imgaes {
				width: 230rpx;
				// height: 204rpx;
			}
		}

		.rigths {
			width: 436rpx;
			height: 204rpx;
			margin-left: 24rpx;
			position: relative;

			.topTitle {
				font-family: PingFangSC-Semibold;
				font-size: 30rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
			}

			.contes {
				width: 100%;
				height: 32rpx;
				margin-top: 19rpx;
				// border: 1rpx solid;
				display: flex;

				.leftTes {
					width: 72rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
				}

				.btons {
					width: 92rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(to right, #8FCF5A, #41B815);
					border-radius: 4px;
					font-family: PingFangSC-Regular;
					font-size: 20rpx;
					color: #FFFFFF;
					letter-spacing: 0;
					line-height: 32rpx;
					font-weight: 400;
				}

				.btons_1 {
					background: linear-gradient(to right, #F1B13F, #FF964F);
					// border-radius: 4px;
					width: 112rpx;
				}

				.btons_2 {
					background: linear-gradient(to right, #56AEFB, #9B8AFF);
				}

				.btons_3 {
					background: linear-gradient(to right, #E09B6A, #CD9864);
				}
			}

			.beix {
				margin-top: 11rpx;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #666666;
				line-height: 26rpx;
				font-weight: 400;
			}

			.moches {
				margin-top: 14rpx;
				display: flex;
				align-items: center;

				.lets {
					width: 72rpx;
					height: 26rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
				}

				.rigthsc {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #EE7930;
					line-height: 26rpx;
					font-weight: 400;
				}
			}

			.icons {
				position: absolute;
				top: 0;
				right: 0;
				width: 104rpx;
				height: 76rpx;
				// border: 1px solid red;

				.imgs {
					width: 104rpx;
					height: 76rpx;
				}
			}
		}

		.btn_box {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				width: 132rpx;
				height: 54rpx;
				background: #EE7930;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #FFFDFC;
				text-align: center;
				line-height: 30rpx;
				font-weight: 400
			}
		}
	}

	.buttom_box {
		margin-top: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.back {

			width: 380rpx;
			height: 80rpx;
			background: #EE7930;
			color: #FFFDFC;
			text-align: center;
			line-height: 80rpx;
			// border: 1rpx solid #666666;
			border-radius: 15rpx;
		}
	}
</style>